<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable" />
		<title>NorthScene</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		
	</head>
	<body>
	
	<body>
		<header id="head">
			<section class="wrap">
				<h1 class="logo">
					<a href="javascript:;">
						<img src="imgs/logo.jpg" alt="北国风光">
						</a>
				</h1>
				<nav class="nav">
					<ul class="list clearfix">
						<li class="active">
						<a href="javascript:;">
							<div class="up" style="width:100%;">首页</div>
							<div class="down">首页</div>
						</a>
						</li>
						<li>
						<a href="javascript:;">
							<div class="up" style="width:100%;">名词来历</div>
							<div class="down">名词来历</div>					
						</a>
						</li>
						<li>
						<a href="javascript:;">
							<div class="up" style="width:100%;">北国雾凇</div>
							<div class="down">北国雾凇</div>
						</a>
						</li>
						<li>
						<a href="javascript:;">
							<div class="up" style="width:100%;">风光图片集</div>
							<div class="down">风光图片集</div>
						</a>
						</li>
						<li>
						<a href="javascript:;">
							<div class="up" style="width:100%;">Team</div>
							<div class="down">Team</div>
						</a>
						</li>
					</ul>
				</nav>
				<!-- <div class="arrow" style="left: 753.5px;"></div> -->
			</section>
		</header>
		<section id="content" >
			<ul class="list">
				<li class="home1" >
					<section>
						<ul class="side1">
								<li class="active leftShow">
									<div class="item"><img src="imgs/01.jpg"></div>
									<p >美国Tim Tadder概念艺术摄影作品</p>
									<pre>  作者：Tim Tadder  |  ©  |  时间：2018-10-15 </pre>
								</li>
								<li class=" rightHide">
									<div class="item"><img src="imgs/04.jpg"></div>
									<p >动物的爱摄影作品</p>
									<pre>  作者：设计欣赏  |  ©  |  时间：2014-03-06 </pre>
								</li>
								<li >
									<div class="item"><img src="imgs/02.jpg"></div>
									<p >精彩创意广告摄影作品</p>
									<pre>  作者：设计欣赏  |  ©  |  时间：2012-12-19 </pre>
								</li>
								<li >
									<div class="item"><img src="imgs/03.jpg"></div>
									<p >法国云层之上的阿尔卑斯山美景摄影作品</p>
									<pre>  作者：Florent Courty  |  ©  |  时间：2018-10-30 </pre>
								</li>
							</ul>
						<ul class="side2">
							<li class="active"></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>

					</section>

				</li>
				<li class="home2" >
					<section>	
					<div class="left" >
						<div class="pics">
							<img src="imgs/poem.jpg">
							<a href="javascript:;"></a>
							<p>《沁园春·雪》毛泽东书法作品</p>

						</div>
					</div>
					<div class="right" >
						<h1>北国风光的出处</h1> 
					 	<pre>
							《沁园春 雪》
							作者：毛泽东 【现代】 赏析
							北国风光，千里冰封，万里雪飘。
							望长城内外，惟馀莽莽。
							大河上下，顿失滔滔。
							山舞银蛇，原驰蜡象，欲与天公试比高。
							须晴日，看红妆素裹，分外妖娆。
							江山如此多娇，引无数英雄竞折腰。
							惜秦皇汉武，略输文采。
							唐宗宋祖，稍逊风骚。
							一代天骄，成吉思汗，只识弯弓射大雕。
							俱往矣，数风流人物，还看今朝。
						</pre> 
					</div>
					</section>
				</li>
				<li class="home3" >
					<section>
						<div class="scene">
							<span class="line"></span>
							<span class="line"></span>
							<span class="line"></span>
							<span class="line"></span>
							<span class="line"></span>
							<div class="item">
								<div class="backFace"></div>
								<div class="face">北国雾凇风光</div>
							</div>
							<div class="item">
								<div class="backFace"></div>
								<div class="face">北国雾凇风光</div>
							</div>
							<div class="item">
								<div class="backFace"></div>
								<div class="face">北国雾凇风光</div>
							</div>
							<div class="item">
								<div class="backFace"></div>
								<div class="face">北国雾凇风光</div>
							</div>
							<div class="item">
								<div class="backFace"></div>
								<div class="face">北国雾凇风光</div>
							</div>
							<div class="item">
								<div class="backFace"></div>
								<div class="face">北国雾凇风光</div>
							</div>
							
						</div>
					</section>
					
				</li>
				<li class="home4" >
				            <section>
				           	<div class="imageFull">
				           		 <div class="out">
							    <div class="in">
							        <div class="img"><img src="imgs/image1.jpg" alt=""/> </div>
							    </div>
							    <div class="in">
							        <div class="img"><img src="imgs/image6.jpg" alt=""/></div>
							    </div>
							    <div class="in">
							        <div class="img"><img src="imgs/image10.jpg" alt=""/></div>
							    </div>
							     <div class="in">
							        <div class="img"><img src="imgs/image2.jpg" alt=""/> </div>
							    </div>
							    <div class="in">
							        <div class="img"><img src="imgs/image7.jpg" alt=""/></div>
							    </div>
							    <div class="in">
							        <div class="img"><img src="imgs/image11.jpg" alt=""/></div>
							    </div>
							     <div class="in">
							        <div class="img"><img src="imgs/image3.jpg" alt=""/> </div>
							    </div>
							    <div class="in">
							        <div class="img"><img src="imgs/image8.jpg" alt=""/></div>
							    </div>
							    <div class="in">
							        <div class="img"><img src="imgs/image12.jpg" alt=""/></div>
							    </div>
							</div>
				           	</div>	
					</section>
				</li>
				<li class="home5" >
				            <section >
						<header class="team1 commonTitle">
							<span>J.R.R.Tolkien</span> <br />
							<span>VOXELAIR</span> <br />
						</header>
						<div class="team2">
							<p class="commonText">J.R.R.Tolkien was a famous English writer and linguist.He spoke more than six languages and majored in ancient Latin. </p>
							<p class="commonText">Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet.
							</p>
						</div>
						<div class="team3">
							<ul >
							<li ></li>
							<li ></li>
							<li></li>
							<li></li>
							<li></li>
							
						</ul>
						</div>
					</section>
				</li>
			</ul>
			<!-- 侧边栏 -->
			<ul class="point">
				<li class="active"><a href="javascript:;" title="首页"></a></li>
				<li><a href="javascript:;" title="名词来历"></a></li>
				<li><a href="javascript:;" title="北国雾凇"></a></li>
				<li><a href="javascript:;" title="风光图片集"></a></li>
				<li><a href="javascript:;" title="Team"></a></li>
			</ul>
		</section>
	<script type="text/javascript" src="js/Jscript.js"></script>
	</body>

</html>